<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3 id="h3">{{ msg }}</h3>
        <input type="button" value=""@click='msg="false"'>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                msg:'ok'
            },
            methods: {
                show:function(){
                    console.log('成功获取');
                    
                }
            },
            beforeCreate() {
                // console.log(this.msg);
                // this.show()
                // 无法调用方法和data
            },
            created() {
                // console.log(this.msg);
                // this.show()
                // data和methods可以调用
            },
            beforeMount() {
                // 编译完成尚未渲染
               
                console.log( document.getElementById('h3').innerText );//{{ msg }}
                
            },mounted() {//这是遇到的第四个生命周期函数
                console.log( document.getElementById('h3').innerText );// ok
                // 实例创建的最后一个生命周期函数 如果要操作Dom必须在mounted中操作
            },beforeUpdate() {
                // 数据被改变但界面还没被更新
                console.log('界面上元素的内容'+ document.getElementById('h3').innerText );//{{ msg }}
                console.log('data中msg的数据是'+this.msg);
                // 页面上显示的数据还是旧的 数据已经变了  data（Model层）=》view(视图层)
                
            },updated() {
                console.log('界面上元素的内容'+ document.getElementById('h3').innerText );//{{ msg }}
                console.log('data中msg的数据是'+this.msg);
                // 页面上显示的数据 和内部数据已经一致了
            },beforeDestroy() {
                // 执行这个时候还没有真正执行销毁
            },destroyed() {
                // 销毁 所有数据方法指令都不可用
            },
        })
    </script>
</body>
</html>